<%-- 
    Document   : Chat
    Created on : 4 janv. 2014, 11:56:54
    Author     : Juste Abel
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
    <!--
        Sopra IM home page
        Frameworks used : jquery, jquery ui and bootstrap
        /!\ the page need javascript to display correctly
    -->
    <head>
        <!-- jquery -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        
        <!-- jqueryui -->
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
        
        <!-- bootstrap -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <!-- select with images plugin -->
        <script type="text/javascript" src="inc/js/jquery.ddslick.min.js"></script>
        
        <!-- jqwidget-->
        <link rel="stylesheet" href="inc/css/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="inc/css/custom.css" type="text/css" />
        <script type="text/javascript" src="inc/js/jqxcore.js"></script>
        <script type="text/javascript" src="inc/js/jqxdata.js"></script>
        <script type="text/javascript" src="inc/js/jqxlistbox.js"></script>
        <script type="text/javascript" src="inc/js/jqxbuttons.js"></script>
        <script type="text/javascript" src="inc/js/jqxscrollbar.js"></script>
        <script type="text/javascript" src="inc/js/jqxwindow.js"></script>
        <script type="text/javascript" src="inc/js/knockout-2.2.1.js"></script>
        
        <!-- Our main js and css files  -->
        <script src="inc/js/chat-design.js" ></script> 
        <script src="inc/js/chat.js" ></script> 
        <link rel="stylesheet" href="inc/css/chat.css" type="text/css"/>
        
        <!-- File upload plugin -->
        <script src="inc/js/jquery.knob.js"></script>
        <script src="inc/js/jquery.ui.widget.js"></script>
        <script src="inc/js/jquery.iframe-transport.js"></script>
        <script src="inc/js/jquery.fileupload.js"></script>
        <script src="inc/js/script.js"></script>
        <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />
        <link href="inc/css/upload.css" rel="stylesheet" />
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>SopraIM</title>
    </head>
    <body>
        <div class="container">
            <div id="header-wrapper">
                <div class="row clearfix" id="panel">
                    <div class="col-md-12 column" >
                        <div class="row clearfix">
                            <div class="col-md-6 column" id="home-panel-wrapper">
                                <a href="<c:url value="/home" /> " class="btn" id="home-panel">
                                    <span class="glyphicon glyphicon-chevron-left" id="home-panel-left"></span>
                                    <span class="glyphicon glyphicon-home"></span>
                                    SEE HOME PANEL
                                </a>
                                
                            </div> 
                            <div class="col-md-6 column" id="conv-panel-wrapper">
                                <div class="btn btn-grey" id="conv-panel" >
                                    <img src="inc/img/glyphicons_245_chat.png" alt="" id="chat-img" />
                                    CONVERSATIONS PANEL
                                </div>
                                <a href="#" id="contact-requests-wrapper" data-toggle="modal" data-target="#myModal">
                                    <img  id="notifs-img" src="inc/img/notifs.png" alt=""/>
                                    <span class="badge nb-friends-req" id="contact-requests">0</span>
                                </a>
                            </div> <!-- /div class="col-md-6 column" id="conv-panel-wrapper" -->
                        </div> <!-- /div class="row clearfix" -->
                    </div> <!-- /div class="col-md-12 column" -->
                </div> <!-- /div class="row clearfix" id="panel" -->
                <div class="row clearfix">
                    <div class="col-md-12 column user-param-wrapper">
                        <div class="row clearfix">
                            <div class="col-md-3 column" id="status-wrapper">
                                <a href="#" id="avatar-wrapper">
                                    <img src="inc/img/default-avatar.png" alt=""/>
                                </a>
                                <div id="username-wrapper">
                                </div>
                                <div id="status">
                                    <div id="select-status" title="click to change your status"></div>
                                </div>
                                
                            </div> <!-- /div class="col-md-3 column" id="status-wrapper" -->
                            <div class="col-md-9 column" id="header">
                                <div class="row clearfix">
                                    <div class="col-md-12 column" id="param-wrapper">
                                        <div >
                                            <span class="glyphicon glyphicon-arrow-right"></span>
                                            <a href="<c:url value="/searchContact?username="/>" class="btn btn-red" id="addContact">
                                                <span class="glyphicon glyphicon-user"></span>
                                                manage my contacts
                                            </a> <!-- /a href="#" class="btn btn-red" -->
                                            <span class="glyphicon glyphicon-arrow-right"></span>
                                            <a href="#" class="btn btn-red">
                                                join group
                                            </a>
                                            <span class="vertical-line"></span>
                                            <a href="#" class="btn btn-red">
                                                <span class="glyphicon glyphicon-plus-sign"></span>
                                                create a new group
                                            </a>
                                            <div class="btn-group">
                                                <a href="#" class="btn-grey dropdown-toggle" data-toggle="dropdown">
                                                    <span class="glyphicon glyphicon-cog"></span>
                                                    manage my account
                                                    <span class="caret"></span>
                                                </a>
                                                <ul class="dropdown-menu justify-left" role="menu">
                                                    <li>
                                                        <a href="#" data-toggle="modal" data-target="#changePasswd">
                                                            <span class="glyphicon glyphicon-edit btn-orange"></span>
                                                            <span class="btn-grey-bold">change password </span>
                                                        </a>
                                                        <a target="_blank" href="<c:url value="/history?getfile="/>${user.username}.txt&type=txt" 
                                                           id="generate-history">
                                                            <span class="glyphicon glyphicon-info-sign btn-orange"></span>
                                                            <span class="btn-grey-bold">generate history</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <!-- display this only if the user has admin rights -->
                                            <div class="btn-group hidden" id="admin">
                                                <a href="#" class="btn-grey dropdown-toggle" data-toggle="dropdown">
                                                    <span class="glyphicon glyphicon-wrench"></span>
                                                    admin tools
                                                    <span class="caret"></span>
                                                </a>
                                                <ul class="dropdown-menu justify-left" role="menu">
                                                    <li>
                                                        <a href="<c:url value="/createUser" /> ">
                                                            <span class="glyphicon glyphicon-plus-sign btn-green"></span>
                                                            <span class="glyphicon glyphicon-user btn-green"></span>
                                                            <span class="btn-grey-bold">add user </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="<c:url value="/deleteUser" /> ">
                                                            <span class="glyphicon glyphicon-minus-sign btn-red"></span>
                                                            <span class="glyphicon glyphicon-user btn-red"></span>
                                                            <span class="btn-grey-bold">remove user </span>
                                                        </a>
                                                    </li>
                                                    <li class="divider"></li>
                                                    <li>
                                                        <a  href="<c:url value="/searchAdmin?username="/>">
                                                            <span class="glyphicon glyphicon-check btn-green"></span>
                                                            <span class="btn-grey-bold">promote admin</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="<c:url value="/searchAdmin?username="/>">
                                                            <span class="glyphicon glyphicon-unchecked btn-red"></span>
                                                            <span class="btn-grey-bold">revoke admin</span>
                                                        </a>
                                                    </li>
                                                    <li class="divider"></li>
                                                    <li>
                                                        <a href="#">
                                                            <span class="glyphicon glyphicon-stats"></span>
                                                            <span class="btn-grey-bold">see statistics </span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div> <!-- /div class="btn-group" -->
                                            <a href="<c:url value="/disconnect" /> " class="btn btn-grey">
                                                <span class="glyphicon glyphicon-off"></span>
                                            </a>
                                        </div> <!-- /div -->
                                    </div> <!-- /div class="col-md-12 column" id="param-wrapper" -->
                                </div> <!-- /div class="row clearfix" -->
                                
                                <div class="row clearfix">
                                    <div class="col-md-12 column" id="conv-wrapper">
                                        <div id="conv-tools">
                                            
                                            <a href="#" class="btn btn-lg btn-grey send-file">
                                                <span class="glyphicon glyphicon-file "></span>
                                                send file
                                            </a>
                                            <a href="#" class="btn btn-lg btn-grey" >
                                                <span class="glyphicon glyphicon-volume-up"></span>
                                                send audio
                                            </a> 
                                            <a href="#" class="btn btn-lg btn-grey send-link">
                                                <span class="glyphicon glyphicon-link "></span>
                                                send link
                                            </a>
                                            <a href="#" class="btn btn-lg btn-grey">
                                                <span class="glyphicon glyphicon-comment"></span>
                                                send the current conversation history
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div> <!-- /div class="col-md-9 column" id="header" -->
                        </div> <!-- /div class="row clearfix" -->
                    </div> <!-- /div class="col-md-12 column user-param-wrapper" -->
                </div> <!-- /div class="row clearfix" -->
            </div> <!-- /div class="row clearfix -->
            <!-- /div id="header-wrapper" -->
            <div class="row clearfix" id="main-pane">
                <div class="col-md-2 column user-param-wrapper " id="userlist-pane-wrapper">
                    <div id="userlist-pane">
                        <div class="col-md-12 column" id="search-contact">
                            <div class="search-icon">
                                <img src="inc/img/glyphicons_003_user.png" alt="contact"/>
                            </div>
                            <div id="search-contact-main">
                                <input class="search username" type="text" placeholder="username"/>
                                <a href="#">
                                    <span class="glyphicon glyphicon-search"></span>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-12 column" id="userlist">
                            <span>loading...</span> 
                        </div> <!-- /div class="col-md-12 column" id="userlist" -->
                        <div class="col-md-12 column" id="search-group">
                            <div class="search-icon">
                                <img src="inc/img/glyphicons_043_group.png" alt="group"/>
                            </div>
                            <div id="serach-contact-main">
                                <input type="text" placeholder="groupe name" class="search"/>
                                <a href="#">
                                    <span class="glyphicon glyphicon-search"></span>
                                </a>
                            </div>
                        </div> <!-- /div class="col-md-12 column" id="search-group" -->
                        <div class="col-md-12 column" id="group-list">
                        </div> <!-- /div class="col-md-12 column" id="group-list" -->
                    </div> <!-- /div id="userlist-pane" -->
                    
                    <div class="col-md-12 column" id="logo-sopra">
                        <img src="inc/img/sopralogo.png" alt="sopra" class="img-rounded" id="logo-sopra-img"/>
                    </div>
                </div> <!-- /div class="col-md-2 column user-param-wrapper " id="userlist-pane-wrapper" -->
                <div class="col-md-10 " id="dialog-pane">
                    <div id="remote-user">
                        <span><img id="remote-status" src=""></span>
                        <span id="remote-username"></span>
                    </div>
                    <!-- store the conversations here. These fields will be fill using javascript -->
                    <div id="message-pane">
                    </div>
                    <div id="textfield">
                        <textarea class="form-control" id="type-msg" rows="2" placeholder="type your message here" ></textarea>
                        <div id="textfield-menu">
                            <span>
                                <a class="btn btn-lg btn-grey send-file" href="#" class="btn btn-lg btn-grey">
                                    <span class="glyphicon glyphicon-file "></span>
                                    file
                                </a>
                            </span>
                            <span>
                                <a href="#" class="btn btn-lg btn-grey" >
                                    <span class="glyphicon glyphicon-volume-up"></span>
                                    audio
                                </a> 
                            </span>
                            <span>
                                <a href="#" class="btn btn-lg btn-grey send-link">
                                    <span class="glyphicon glyphicon-link "></span>
                                    link
                                </a>
                            </span>
                            <span>
                                <a href="#" class="btn btn-lg btn-grey">
                                    <span class="glyphicon glyphicon-comment"></span>
                                    history
                                </a>
                            </span>
                        </div>
                    </div>
                </div> <!-- /div class="col-md-10 " id="dialog-pane" -->
            </div> <!-- /div class="row clearfix" id="main-pane" -->
        </div> <!-- /div class="container" -->
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header panel-footer">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Friends request</h4>
                    </div>
                    <div class="modal-body">
                        <table id="users" class="table table-striped">
                            <thead class="table-head">
                                <tr >
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="view-requests">
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        
        <div class="modal fade" id="changePasswd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header panel-footer">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Change password</h4>
                    </div>
                    <div class="modal-body " id="change-password-form">
                        <fieldset>
                            <legend id="legend">Fill this form to change your password</legend>
                            <label for="currentPwd">Current Password <span class="required">*</span></label>
                            <input class="form-control" type="password" id="password" name="Current" value="" size="20" maxlength="20" />
                            <span class="error">${errors['password']}</span>
                            <br />
                            
                            <label for="newPwd">New Password <span class="required">*</span></label>
                            <input class="form-control" type="password" id="newPasswd" name="newPwd" value="" size="20" maxlength="20" />
                            <span class="error">${errors['newPwd']}</span>
                            <br />
                            
                            <label for="confirmPwd">Confirm Password <span class="required">*</span></label>
                            <input class="form-control" type="password" id="newPasswd2" name="confirmPwd" value="" size="20" maxlength="20" />
                            <span class="error">${errors['confirmPwd']}</span>
                            <p class="${empty errors ? 'succes' : 'error'}">${result}</p>
                        </fieldset>
                        <!--<table>
                        <tr><td>Current Password</td><td><input type="password" name="current" ></td></tr>
                        <tr><td>New Password</td><td><input type="password" name="new"></td></tr>
                        <tr><td>Confirm Password</td><td><input type="password" name="confirm"></td></tr>
                        <tr><td><input type="submit" value="Change Password"></td></tr>
                        </table>
                        -->  
                    </div>
                    <div class="validateTips"></div>
                    <div class="modal-footer">
                        <button type="button" id="submit-passwd" class="btn btn-default sansLabel">Change password</button>
                        <button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        
        <!-- file window -->
        <div id="fileUploadWindow">
            <div id="window-content">
                <form id="upload" method="post" action="sendFile" enctype="multipart/form-data">
                    <div id="drop">
                        Drop Here
                        
                        <a>Browse</a>
                        <input type="file" name="upl" multiple />
                    </div>
                    <ul>
                        <!-- The file uploads will be shown here -->
                    </ul> 
                </form>
            </div>
        </div>
        
        <!-- link window -->
        <div id="linkWindow">
            <div id="link-window-content">
                <div class="form-group">
                    <label class="sr-only" for="link"></label>
                    <input style="width:230px;" type="link" class="form-control pull-left" id="link-form" value="http://" >
                </div>
                <button style="margin-top: -14px;" id="link-button" class="btn btn-warning pull-right">Send link</button>
            </div>
        </div>
    </body>
</html>
